<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="<%=HTTP_ROOT%>/css/bootstrap.css">
    <style media="screen">
    .my-panel {width:80%; position:absolute; z-index:100; left:50%; top:100px; margin-left:-40%; display:none;}
    .my-panel-shadow {width:100%; height:100%; position:fixed; left:0; top:0; background:#000; opacity:0.6; z-index:99; display:none;}

    .my-dialog {width:300px; position:absolute; z-index:100; left:50%; top:200px; margin-left:-150px; display:none;}
    .my-dialog-shadow {width:100%; height:100%; position:fixed; left:0; top:0; background:#000; opacity:0.3; z-index:99; display:none;}
    </style>
  </head>
  <body>
    <ul class="nav nav-tabs">

      <%for(let type in page_types){%>
      <li role="presentation" <%if(type==page_type){%>class="active"<%}%>>
        <a href="<%=HTTP_ROOT%>/admin/<%=type%>"><%=page_types[type]%></a>
      </li>
      <%}%>
    </ul>
    <!--表格-->
    <a href="#" class="btn btn-primary glyphicon glyphicon-plus" id="btn_add">添加</a>
    <table class="table">
      <thead>
        <tr>
          <th>ID</th>

          <%fields.forEach(field=>{%>
          <th><%=field.title%></th>
          <%})%>

          <th></th>
        </tr>
      </thead>
      <tbody>
        <% datas.forEach(data=>{ %>
        <tr>
          <td width="50"><%=data.ID%></td>

          <%fields.forEach(field=>{%>
          <td><%=data[field.name]%></td>
          <%})%>

          <td width="250">
            <a
              href="<%=HTTP_ROOT%>/admin/<%=page_type%>/delete/<%=data.ID%>"
              class="btn btn-danger glyphicon glyphicon-trash"
              onclick="return confirm('你是否真的确认要删除')"
            >删除</a>

            <a
              href="#" data-id="<%=data.ID%>"
              class="btn btn-default glyphicon glyphicon-pencil btn-modify"
            >修改</a>
          </td>
        </tr>
        <% }) %>
      </tbody>
    </table>

    <!--添加-->
    <div class="my-panel-shadow"></div>
    <div class="panel panel-default my-panel">
      <div class="panel-heading">
        <div class="panel-title">
          添加
        </div>
      </div>
      <div class="panel-body">
        <form class="form form-horizontal" action="<%=HTTP_ROOT%>/admin/<%=page_type%>" method="post" enctype="multipart/form-data">

          <%fields.forEach(field=>{%>
          <div class="form-group">
            <label class="col-sm-2 control-label"><%=field.title%></label>
            <div class="col-sm-10">
              <%if(field.type=='textarea'){%>
                <textarea class="form-control" name="<%=field.name%>" placeholder="<%=field.title%>" rows="2  0"></textarea>
              <%}else{%>
                <input type="<%=field.type%>" class="form-control" name="<%=field.name%>" placeholder="<%=field.title%>">
              <%}%>
            </div>
          </div>
          <%})%>

          <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
              <button type="submit" class="btn-primary form-control">提交</button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!--对话框-->
    <div class="my-dialog-shadow"></div>
    <div class="panel panel-default my-dialog">
      <div class="panel-heading">
        <div class="panel-title">
          标题
        </div>
      </div>
      <div class="panel-body">
        内容
      </div>
      <div class="panel-footer">
        <div class="btn-group">
          <button type="button" class="btn btn-default btn-sm">按钮1</button>
          <button type="button" class="btn btn-default btn-sm">按钮2</button>
        </div>
      </div>
    </div>
  </body>
  <script src="<%=HTTP_ROOT%>/js/jquery.min.js" charset="utf-8"></script>
  <script>
  $('#btn_add').click(function (){
    $('.my-panel, .my-panel-shadow').show();
  });
  </script>

  <script>
  const HTTP_ROOT='<%=HTTP_ROOT%>';
  const page_type='<%=page_type%>';
  </script>

  <script>
  $('.btn-modify').click(async function (){
    let id=this.dataset.id;
    let url=`${HTTP_ROOT}/admin/${page_type}/get/${id}`;

    let data=await $.ajax({
      url,
      dataType: 'json'
    });

    if(data.err){
      alert(data.msg);
    }else{
      //
      let old_data=data.data;
      $('.my-panel').show();
      $('.my-panel-shadow').show();

      $('.my-panel .panel-title').html('修改');
      $('.my-panel form').attr('action', `${HTTP_ROOT}/admin/${page_type}/modify/${id}`);

      console.log(old_data);

      $('.my-panel input').each(function (){
        if(old_data[this.name]){
          try{
            this.value=old_data[this.name];
          }catch(e){}
        }
      });
    }
  });
  </script>
</html>
